<!DOCTYPE html>
<html lang="zh-CN">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>

<body>
   <!-- 
      id:标识元素的唯一性
      width:画布的宽度
      height:画布的高度
    -->
   <canvas id="c1" width="800" height="600">
      当前浏览器不支持canvas，请下载最新版浏览器
      <a href="https://www.google.cn/chrome/?standalone=1&platform=win64">立即下载</a>
   </canvas>

   <script>
      // 1.找到画布
      const c1 = document.getElementById('c1')

      // 判断是否有getContext
      if (!c1.getContext) {
         console.log('当前浏览器不支持canvas，请下载最新版浏览器')
      }
      // 2.获取画笔，上下文对象
      const ctx = c1.getContext('2d')

      // 文字 大小|字体
      ctx.font = "100px Microsoft YaHei"
      // 文字内容

      // 填充渲染文字fillText(文本内容，文本位置，绘制文字的最大宽度)
      // ctx.fillText("XiangJie", 100, 300)

      // 文本对齐选项(start|end|left|right|center)
      ctx.textAlign = "center"
      // 文本基线对齐(top|bottom|middle)
      ctx.textBaseline = "middle"
      // 文本的方向
      // ctx.direction = "rtl"

      // 预测量文本宽度
      let text = ctx.measureText("XiangJie!!")
      alert(`文本宽度为：${text.width}`)

      ctx.strokeStyle = "red"
      ctx.strokeText("XiangJie!!", 300, 300)
      ctx.arc(300, 300, 5, 0, 2 * Math.PI)
      ctx.fill()

   </script>
</body>

</html>